<template>
<!--comment-->
		<view class="service-box">
			<view class="top">
				<view class="img">
					
                      <image :src="serverInfo.image!='[]'?JSON.parse(serverInfo.image)[0].url:''" mode="aspectFill"></image> 

				</view>
				<view class="right">
					<view class="title">{{serverInfo.serverName}}</view>
					<view class="text">{{serverInfo.serverInstruction}}</view>

                <view class="company-box">
                        <view class="company-left">
                            <view style='width:34rpx;height:32rpx'>
									<!-- <u-icon name="home" color="#B3B3B3" size="30"></u-icon> -->
									 <!-- <image src="../../static/homeicon/indexicon.png" style="width:100%;height:100%">
									 </image> -->

                            <u-image width="100%" height="100%" src="@/static/homeicon/indexicon.png" >
                            </u-image>
							</view>
							<view class="companyInfo" style="color:#B3B3B3;margin-left:10rpx"><!--enterprise_name-->
								{{serverInfo.supplierDate?serverInfo.supplierDate.shopName:''}}
							</view>
                        </view>
                        <view class="num">¥{{serverInfo.price}}</view>
                        </view>
				</view>
			</view>
			
		</view>
</template>


<script>
export default {

    props: {
        serverInfo:{
            type: Object
        }
    },

    data () {
        return {
            serviceImg: ''
           
        }
    },
    mounted()
    {
        this.serviceImg = JSON.parse(this.serverInfo.image)[0].url
    },
    
}
</script>


<style lang="scss" scoped>

		.service-box {

			.top{
				display: flex;
				border-bottom: 1px solid #EAEAEA;
				padding-bottom: 20rpx;
				margin-left: 36rpx;
				.img{
					margin-right: 40rpx;
					image{
						width: 152rpx;
						height: 152rpx;
						border-radius: 16rpx;
					}
				}
				.title{
                    font-weight: 600;
                    font-size: 30rpx;
                    margin-bottom: 12rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
				}
				.text{
                    color: #999;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                }
                .company-box{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                        .company-left{
                            display: flex;
                        }
                        .num {
                            color: #FF3B30;
                            font-size: 36rpx;
                            margin-top: 10rpx;
                        }
                }

			}

		}

</style>
